<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时交易量统计</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background-color: #1e1e2f;
            color: #ffffff;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            background: linear-gradient(90deg, #2c2c3f, #1a1a2e);
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }
        .header h1 {
            font-size: 28px;
            margin-bottom: 5px;
            color: #6ce5ff;
        }
        .header p {
            color: #a9a9b3;
        }
        .chart-container {
            background-color: #27293d;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            margin-bottom: 20px;
            height: 450px;
        }
        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #27293d;
            border-radius: 10px;
            padding: 15px 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }
        .stats {
            display: flex;
            gap: 20px;
        }
        .stat-card {
            background: linear-gradient(90deg, #2c2c3f, #1a1a2e);
            padding: 15px 20px;
            border-radius: 8px;
            min-width: 180px;
        }
        .stat-card h3 {
            font-size: 14px;
            color: #a9a9b3;
            margin-bottom: 8px;
        }
        .stat-card p {
            font-size: 24px;
            font-weight: bold;
            color: #6ce5ff;
        }
        .buttons {
            display: flex;
            gap: 10px;
        }
        button {
            background: linear-gradient(90deg, #6ce5ff, #3785c5);
            color: #1e1e2f;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        button:hover {
            background: linear-gradient(90deg, #3785c5, #6ce5ff);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(108, 229, 255, 0.3);
        }
        button:active {
            transform: translateY(0);
        }
        .last-update {
            color: #a9a9b3;
            font-size: 14px;
            text-align: right;
        }
        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
                gap: 15px;
            }
            .stats {
                width: 100%;
                justify-content: space-between;
            }
            .buttons {
                width: 100%;
                justify-content: center;
            }
            .last-update {
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>实时交易量统计</h1>
            <p>每30秒自动更新最新交易数据</p>
        </div>
        
        <div class="chart-container">
            <div id="chart" style="width: 100%; height: 100%;"></div>
        </div>
        
        <div class="controls">
            <div class="stats">
                <div class="stat-card">
                    <h3>当前交易量</h3>
                    <p id="current-volume">0</p>
                </div>
                <div class="stat-card">
                    <h3>今日峰值</h3>
                    <p id="peak-volume">0</p>
                </div>
                <div class="stat-card">
                    <h3>平均交易量</h3>
                    <p id="avg-volume">0</p>
                </div>
            </div>
            
            <div class="buttons">
                <button id="pause-btn">暂停更新</button>
                <button id="reset-btn">重置图表</button>
            </div>
            
            <div class="last-update">
                最后更新: <span id="update-time">--:--:--</span>
            </div>
        </div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        // 图表配置选项
        let option = {
            backgroundColor: '#27293d',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['交易量'],
                textStyle: {
                    color: '#fff'
                },
                top: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [],
                axisLine: {
                    lineStyle: {
                        color: '#a9a9b3'
                    }
                },
                axisLabel: {
                    color: '#a9a9b3'
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#a9a9b3'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#2c2c3f'
                    }
                },
                axisLabel: {
                    color: '#a9a9b3'
                }
            },
            series: [
                {
                    name: '交易量',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#6ce5ff'
                    },
                    itemStyle: {
                        color: '#6ce5ff'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(108, 229, 255, 0.5)'
                            }, {
                                offset: 1,
                                color: 'rgba(108, 229, 255, 0.1)'
                            }]
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                }
            ]
        };
        
        // 设置初始选项
        myChart.setOption(option);
        
        // 生成模拟数据函数
        function generateData() {
            const now = new Date();
            const time = now.toTimeString().substr(0, 8);
            // 生成一个介于1000到5000之间的随机交易量
            const volume = Math.floor(Math.random() * 4000) + 1000;
            
            return { time, volume };
        }
        
        // 初始化数据
        let timeData = [];
        let volumeData = [];
        let peakVolume = 0;
        let totalVolume = 0;
        let dataPoints = 0;
        let isPaused = false;
        let updateInterval;
        
        // 启动定时更新
        function startUpdating() {
            updateInterval = setInterval(() => {
                if (!isPaused) {
                    updateChart();
                }
            }, 2000); // 30秒更新一次
            
            // 立即执行一次更新
            updateChart();
        }
        
        // 更新图表数据
        function updateChart() {
            const newData = generateData();
            
            // 更新时间数据
            timeData.push(newData.time);
            volumeData.push(newData.volume);
            
            // 如果数据点超过20个，移除最早的数据
            if (timeData.length > 20) {
                const removedVolume = volumeData.shift();
                timeData.shift();
                
                // 更新统计信息
                totalVolume -= removedVolume;
                dataPoints--;
            }
            
            // 更新统计信息
            totalVolume += newData.volume;
            dataPoints++;
            
            if (newData.volume > peakVolume) {
                peakVolume = newData.volume;
            }
            
            const avgVolume = Math.round(totalVolume / dataPoints);
            
            // 更新统计卡片
            document.getElementById('current-volume').textContent = newData.volume.toLocaleString();
            document.getElementById('peak-volume').textContent = peakVolume.toLocaleString();
            document.getElementById('avg-volume').textContent = avgVolume.toLocaleString();
            
            // 更新最后更新时间
            const now = new Date();
            document.getElementById('update-time').textContent = now.toTimeString().substr(0, 8);
            
            // 更新图表
            myChart.setOption({
                xAxis: {
                    data: timeData
                },
                series: [{
                    data: volumeData
                }]
            });
        }
        
        // 暂停/继续更新
        document.getElementById('pause-btn').addEventListener('click', function() {
            isPaused = !isPaused;
            this.textContent = isPaused ? '继续更新' : '暂停更新';
        });
        
        // 重置图表
        document.getElementById('reset-btn').addEventListener('click', function() {
            timeData = [];
            volumeData = [];
            peakVolume = 0;
            totalVolume = 0;
            dataPoints = 0;
            
            document.getElementById('current-volume').textContent = '0';
            document.getElementById('peak-volume').textContent = '0';
            document.getElementById('avg-volume').textContent = '0';
            document.getElementById('update-time').textContent = '--:--:--';
            
            myChart.setOption({
                xAxis: {
                    data: []
                },
                series: [{
                    data: []
                }]
            });
        });
        
        // 窗口大小改变时调整图表大小
        window.addEventListener('resize', function() {
            myChart.resize();
        });
        
        // 开始更新数据
        startUpdating();
    </script>
</body>
</html>